<template>
    <div class="add container" :class="{mobile:mobile}">
        <h2>{{id ? '修改' : '新增'}}</h2>
        <p class="p" v-if="parent.name"> 父级 : {{parent.name}}</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="小名">
            <el-input v-model="form.minm"></el-input>
        </el-form-item>
        <el-form-item label="伴侣">
            <el-input v-model="form.partner"></el-input>
        </el-form-item>
        <el-form-item label="性别">
           <el-radio-group v-model="form.gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排行">
           <el-input v-model="form.level"></el-input>
        </el-form-item>
        <el-form-item label="诞辰">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="form.born" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="殁于">
            <el-date-picker type="datetime" placeholder="选择日期" v-model="form.death" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="简介">
            <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.desc">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="back()">取消返回</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name:'add',
        data(){
            return {
                form:{
                    gender:"1"
                },
                rules:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
                id:this.$route.query.id || "",
                parentid:this.$route.query.parent || "-1",
                parent:{},
                mobile: this.$utils.isMobile
            }
        },
      async  mounted(){
            if(this.id){
                try{
                    this.form = await this.$api.info({id:this.id});
                }catch(e){
                    console.log(e);
                }
            }
            if(this.parentid && this.parentid != "-1"){
                
                this.parent = await this.$api.info({id:this.parentid})

                
            }
        },
        methods:{
            async onSubmit(){
                try{
                    await this.$refs.form.validate();
                    let form = this.form;
                    form.parent = this.parentid;
                    if(this.id){
                        await this.$api.editPerson(this.form);
                        this.$message.success("修改成功");
                        this.back();
                    }else{
                        await this.$api.addPerson(this.form);
                        this.$message.success("新增成功");
                        this.$refs.form.clearValidate();
                        this.form = {gender:"1"};
                    }
                }catch(e){
                    console.log(e);
                }
            },
            back(){
                if(window.history.length > 1){
                    this.$router.go(-1);
                }else{
                    this.$router.push({name:"home"});
                }
            }
        }
    }
</script>
<style lang="scss" scoped src="./Add.scss">
</style>